<template>
  <transition name="fade">
    <div class="overlay-container" v-show="false" @keydown="keydown">
      <!-- 遮罩层 -->
      <div class="overlay-mask" @click.self="handleMaskClick"></div>

      <!-- 浮层内容 -->
      <div class="overlay-content" :style="contentStyle">
        <div class="overlay-header">
          <slot name="header">
            <h3>标题</h3>
            <button @click="close">×</button>
          </slot>
        </div>

        <div class="overlay-body">
          <slot></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">

const props = withDefaults(defineProps<{
  clickMaskClose: boolean
  show: boolean
}>(), {});

const emit = defineEmits(["update:show", "close"]);
function keydown(e: KeyboardEvent) {
  if (e.key === 'Escape') {
    if (document.activeElement === fileInput.value) {
      e.preventDefault();  // 阻止文件选择器外部默认关闭弹窗的行为
      e.stopPropagation(); // 阻止事件冒泡
      return; // 不关闭弹窗
    }
    showModal.value = false;
  }
}

const contentStyle = computed(() => ({
  width: "99px"
}));

const close = () => {
  emit("update:show", false);
  emit("close");
};

const handleMaskClick = () => {
  if (props.clickMaskClose) {
    close();
  }
};

const handleEscape = (e: any) => {
  if (e.key === "Escape" && props.show) {
    close();
  }
};

onMounted(() => {
  document.addEventListener("keyup", handleEscape);
});

onBeforeUnmount(() => {
  document.removeEventListener("keyup", handleEscape);
});
</script>

<style scoped>
.overlay-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.overlay-content {
  position: relative;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 1;
}

.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active .overlay-content,
.fade-leave-active .overlay-content {
  transition: transform 0.3s;
}

.fade-enter-from .overlay-content,
.fade-leave-to .overlay-content {
  transform: scale(0.95);
}
</style>
